import { selectors as s } from "@/utils/css"
import { createVar, globalStyle } from "@vanilla-extract/css"

export const theme = {
  foreground: createVar(),
  background: createVar(),
  border: createVar(),
}

const light = {
  [theme.foreground]: "#343537",
  [theme.background]: "#ffffff",
  [theme.border]: "#dce0e2",
}

const dark = {
  [theme.foreground]: "#c8c5c2",
  [theme.background]: "#1e1f20",
  [theme.border]: "#3d3f42",
}

export const themeModes = ["system", "light", "dark"] as const
export type ThemeMode = (typeof themeModes)[number]

globalStyle("html", {
  backgroundColor: theme.background,
  color: theme.foreground,
})

export const dataTheme = "data-theme"
const htmlDataTheme = (mode: ThemeMode) => `html[${dataTheme}="${mode}"]`
const colorScheme = (mode: ThemeMode) => `(prefers-color-scheme: ${mode})`
globalStyle(htmlDataTheme("light"), { vars: light })
globalStyle(htmlDataTheme("dark"), { vars: dark })
globalStyle(s("html", htmlDataTheme("system")), {
  "@media": {
    [colorScheme("light")]: { vars: light },
    [colorScheme("dark")]: { vars: dark },
  },
})
